<template>
<div class="otherConfig">
    <el-tabs v-model="activeName" >
      <el-tab-pane :label="$t('configTabTitle.otherConfig')" name="first" class="tab">
          <div style="padding:10px 10px">
            <span>{{$t('configLazyLoad.channel.otherConfigTip1')}}</span>
            <questionToolTip :tipContent="$t('configLazyLoad.channel.otherConfigTip2')"></questionToolTip>
            <el-switch
                class="switch"
                v-model="autoCheckOut"
                @change='switchChange'>
            </el-switch>
          </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import questionToolTip from '@components/ui-modules/questionToolTip/QuestionToolTip.vue'
export default {
    components:{
        questionToolTip
    },
    data(){
        return {
            activeName: 'first',
            autoCheckOut: false
        }
    },
    methods:{
        switchChange(val){
            this.$store.dispatch('updateAutoMoveOutConfig', {autoCheckOut: this.autoCheckOut}).then(resp => {
                if (resp && resp.success) {
                    this.autoCheckOut = this.autoCheckOut
                } else {
                    this.autoCheckOut = !this.autoCheckOut
                }
            })
        },
        getAutoMoveOutConfig(){
            this.$store.dispatch('queryAutoMoveOutConfig', {}).then(resp => {
                if (resp && resp.success) {
                    this.autoCheckOut = resp.data.autoCheckOut
                }
            })
        }
    },
    mounted(){
        this.getAutoMoveOutConfig()
    }
}
</script>

<style lang="stylus" scoped>
@import '../../../../../assets/common.styl'
.otherConfig
    .switch
        margin-left:20px
</style>
<style lang="stylus">
.otherConfig
    .el-tabs__item.is-active
        transform translateX(8px) !important
</style>